<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/header.jsp" %>

<style>
    .input-group {
        width: 300px;
        margin: 20px auto;
    }
</style>

<div class="row">
    <%@include file="/user/user_information_left_nav.jsp" %>
    <div class="col-md-10">
        <button type="button" class="btn btn-default" style="outline: none"
                onclick="showAddress('${pageContext.request.contextPath}')">新增收货地址
        </button>
        <table class="table table-striped" id="address_tab">
            <thead>
            <tr>
                <th>序号</th>
                <th>省-市-区</th>
                <th>街道</th>
                <th>收件人</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="address_tbody">

            <c:forEach items="${addressList}" var="address" varStatus="vs">
                <tr>
                    <td>${vs.index+1}</td>
                    <td>${address.addrProvince} ${address.addrCity} ${address.addrArea}</td>
                    <td>${address.addrContent}</td>
                    <td>${address.addrReceiver}</td>
                    <td>${address.addrTel}</td>
                    <td hidden>${address.addrId}</td>
                    <td>
                        <a href="#" onclick="editAddress('${vs.index+1}')">修改</a>
                        <a href="${pageContext.request.contextPath}/user/remAddress.action?addressId=${address.addrId}">删除</a>
                        <c:if test="${address.addrIsdefault != 1}">
                            <a href="${pageContext.request.contextPath}/user/setDefaultAddress?addressId=${address.addrId}">设为默认地址</a>
                        </c:if>
                    </td>
                </tr>
            </c:forEach>
            </tbody>

        </table>
    </div>
</div>


<script type="text/javascript">
    function showAddress(baseurl) {
        $("#addressModal").modal('show');
        $("#addressTitle").html("新增收货地址");

        //$("#cart_tab").show();
    }

    function editAddress(pos) {
        let data = getTable(Number.parseInt(pos));
        $('#addrId').val(data.addrId)
        $('#addrProvince').val(data.addrProvince);
        $('#addrCity').val(data.addrCity);
        $('#addrArea').val(data.addrArea);
        $('#addrContent').val(data.addrContent);
        $('#addrReceiver').val(data.addrReceiver);
        $('#addrTel').val(data.addrTel);
        $("#updateAddressModal").modal('show');
        $("#updateAddressTitle").html("修改收货地址");
    }

    function getTable(pos) {
        let child = document.getElementById('address_tab').rows[pos].children
        let data = {
            addrId: '',
            addrProvince: '',
            addrCity: '',
            addrArea: '',
            addrContent: '',
            addrReceiver: '',
            addrTel: ''
        }
        let pca = child[1].innerHTML.split(' ');
        data.addrProvince = pca[0];
        data.addrCity = pca[1];
        data.addrArea = pca[2];
        data.addrContent = child[2].innerHTML;
        data.addrReceiver = child[3].innerHTML;
        data.addrTel = child[4].innerHTML;
        data.addrId = child[5].innerHTML;
        return data;
    }

    function closeMsg() {
        window.location.reload();
    }
</script>


<div class="modal fade" id="addressModal" role="dialog" aria-hidden="true"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" style="width: 350px">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" aria-hidden="true" type="button" data-dismiss="modal">
                    ×
                </button>
                <h4 class="modal-title" id="addressTitle">

                </h4>
            </div>

            <form class="form" role="form" action="${pageContext.request.contextPath}/user/addAddress.action"
                  method="post">
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1">省</span>
                    <input type="text" name="addrProvince" class="form-control" placeholder=""
                           aria-describedby="basic-addon1">
                </div>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon2">市</span>
                    <input type="text" name="addrCity" class="form-control" placeholder=""
                           aria-describedby="basic-addon1">
                </div>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon3">区</span>
                    <input type="text" name="addrArea" class="form-control" placeholder=""
                           aria-describedby="basic-addon1">
                </div>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon4">街道</span>
                    <input type="text" name="addrContent" class="form-control" placeholder=""
                           aria-describedby="basic-addon1">
                </div>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon5">收件人</span>
                    <input type="text" name="addrReceiver" class="form-control" placeholder=""
                           aria-describedby="basic-addon1">
                </div>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon6">手机号</span>
                    <input type="text" name="addrTel" class="form-control" placeholder=""
                           aria-describedby="basic-addon1">
                </div>

                <div class="modal-footer">
                    <button class="btn btn-primary" type="submit" id="ok">确认</button>
                    <button class="btn btn-default" type="button" data-dismiss="modal"
                            onclick="closeMsg()">关闭窗口
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>

<div class="modal fade" id="updateAddressModal" role="dialog" aria-hidden="true"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" style="width: 350px">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" aria-hidden="true" type="button" data-dismiss="modal">
                    ×
                </button>
                <h4 class="modal-title" id="updateAddressTitle">

                </h4>
            </div>

            <form class="form" role="form" action="${pageContext.request.contextPath}/user/updateAddress.action"
                  method="post">

                <input name="addrId" id="addrId" hidden>

                <div class="input-group">
                    <span class="input-group-addon">省</span>
                    <input type="text" name="addrProvince" id="addrProvince" class="form-control" placeholder=""
                           aria-describedby="basic-addon1">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">市</span>
                    <input type="text" name="addrCity" id="addrCity" class="form-control" placeholder=""
                           aria-describedby="basic-addon1">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">区</span>
                    <input type="text" name="addrArea" id="addrArea" class="form-control" placeholder=""
                           aria-describedby="basic-addon1">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">街道</span>
                    <input type="text" name="addrContent" id="addrContent" class="form-control" placeholder=""
                           aria-describedby="basic-addon1">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">收件人</span>
                    <input type="text" name="addrReceiver" id="addrReceiver" class="form-control" placeholder=""
                           aria-describedby="basic-addon1">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">手机号</span>
                    <input type="text" name="addrTel" id="addrTel" class="form-control" placeholder=""
                           aria-describedby="basic-addon1">
                </div>

                <div class="modal-footer">
                    <button class="btn btn-primary" type="submit">确认</button>
                    <button class="btn btn-default" type="button" data-dismiss="modal"
                            onclick="closeMsg()">关闭窗口
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>